<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div {
            display: flex;
        }
        
        #lis {
            border: 1px solid blue;
            padding: 14px 16px;
            margin: 14px 16px;
            list-style: none;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <div class="div">
        <li class="li" name="lis" onclick="active(event)"><a href="#">语法</a></li>
        <li class="li"><a href="#" onclick="active(event)">例子</a></li>
        <li class="li"><a href="#" onclick="active(event)">规范</a></li>
        <li class="li"><a href="#" onclick="active(event)">兼容</a></li>
        <li class="li"><a href="#" onclick="active(event)">属性</a></li>
    </div>
</body>
<script>
    // let list = document.getElementById("list");
    // list.addEventListener("click", display)
    // document.getElementById("list").addEventListener("click",function display(){

    // })

    // addEventListener("click", function() {
    //     document.getElementById("list").style.border = "3px";
    // })

    // function display() {
    //     list.style.border = "3px";
    // }
    const lis = document.getElementById("lis");
    // lis.removeAttribute("class");
    // const div = document.getElementsByClassName("div");
    const li = document.querySelectorAll(".li");

    function active(e) {
        console.log(e)
        li.forEach((i) => {
            // console.log(i);
            i.removeAttribute("lis");
        })
        e.target.setAttribute("class", "li")

    }
    console.log(typeof li)
    let a = 34;
    let b = Math.pow(a, 2);
    console.log(b)

    function number(num) {
        // this.num = Math.pow(num, 2);
        return Math.pow(num, 2);
    }
    let n = number(2);
    console.log(n)

    function dosomething() {}
    // console.log(dosomething.prototype)
    dosomething.prototype.foo = "bar";
    var dosomeInstancing = new dosomething;
    dosomeInstancing.prop = "some value";
    console.log("dosomeInstancing.prop:  " + dosomeInstancing.prop);
    console.log("dosomeInstancing.foo:    " + dosomeInstancing.foo);
    console.log("dosomething.prop:     " + dosomething.prop);
    console.log("dosomething.foo:     " + dosomething.foo);
    console.log("dosomething.prototype.prop:  " + dosomething.prototype.prop);
    console.log("dosomething.prototype.foo:    " + dosomething.prototype.foo);

    function A(a) {
        this.varA = a;
    }

    A.prototype = {
        varA: null,

        dosomething: function() {

        }
    }

    function B(a, b) {
        A.call(this, a);
        this.varB = b;
    }
    B.prototype = Object.create(A.prototype, {
        varB: {
            value: null,
            enumerable: true,
            configurable: true,
            writable: true
        },
        dosomething: {
            value: function() {
                A.prototype.dosomething.apply(this, arguments);
            },
            enumerable: true,
            configurable: true,
            writable: true
        }
    });
    B.prototype.constructor = B;
    // var b = new B();
    // B.dosomething();
    console.log(3 / 2)
    let years = [1998, 1999, 2000, 2001];
    // console.log(years.0)
    console.log(years[3])
</script>

</html>